<template>
  <div class="main">
    <div class="order-header">
      <a href class="main-header-logo">
        <img :src="logo" alt />
        <span>我爱报销</span>
      </a>
      <span>
        <img
          @click="$router.push('/person')"
          src="../../../../assets/img/设置.png"
          alt
        />
      </span>
    </div>
    <div class="user_msg">
      <div class="user_nameimg">
        <van-image round :src="photo" @click="editPhpto" />
        <span>{{ nickname }}</span>
      </div>
      <div class="user_money" @click="$router.push('/replace/mybalance')">
        我的余额
        <span class="money_num">{{ coin }}</span>
      </div>
    </div>
    <div class="home-content">
      <van-tabs v-model="active" @change="tabsChange">
        <van-tab title="待接单"></van-tab>
        <van-tab title="我的订单"></van-tab>
      </van-tabs>
      <van-list
        v-model="listLoading"
        :finished="finished"
        :round="true"
        finished-text="没有更多了"
        @load="onLoad"
        :style="{ paddingBottom: isMydd ? '50px' : '0' }"
      >
        <div class="item" v-for="(item, index) in dataList" :key="index">
          <van-cell
            :title="item.order_number"
            :value="item.status"
            @click="goDetails(item)"
          >
            <template #label>
              <span class="mr10">{{ item.service_project_title }}</span>
              <span>{{ item.expenseCate_title }}</span>
            </template>
            <template #default>
              <span :class="item.status | statusColor">{{
                item.status_title
              }}</span>
              <van-tag
                type="primary"
                class="font14"
                round
                @click="goFileAudit(item)"
                v-if="item.status == 10"
                >审核
              </van-tag>
              <van-tag
                type="success"
                class="font14"
                round
                @click="goFileAddPage(item)"
                v-if="item.status == 11"
                >点击补充资料
              </van-tag>
              <van-tag
                :type="item.isExamine == 0?'default':'success'"
                class="font14"
                round
                v-if="item.status == 13"
                >{{item.isExamine == 0?'未审核':'已审核'}}
              </van-tag>
              <p>{{ item.created_at }}</p>
            </template>
          </van-cell>
        </div>
      </van-list>
    </div>
    <van-tabbar v-model="active2" v-if="isMydd" class="bottomSel">
      <van-tabbar-item @click="unCarryOut">未完成</van-tabbar-item>
      <van-tabbar-item @click="carryOut">已完成</van-tabbar-item>
    </van-tabbar>
    <editAvatar ref="editAvatar" />
  </div>
</template>

<script>
import { getOrder } from "@a/order.js";
import editAvatar from "@cm/b-edit-avatar.vue";
import { Dialog } from "vant";
import config from "../../../../../public/config";
import { get } from "../../../../../public/API/query";
export default {
  components: {
    editAvatar
  },
  data() {
    return {
      logo: require("@/assets/img/logo.png"),
      coin: "",
      active: localStorage.getItem("active"),
      dataList: [],
      listLoading: false,
      finished: false,
      p: 1,
      status: [1],
      isMydd: false,
      active2: 0,
      type: 1,
    };
  },
  methods: {
    goFileAudit(item) {
      event.stopPropagation();
      this.$router.push({
        path: "/replace/fileAudit",
        query: {
          id: item.id
        }
      });
    },
    goFileAddPage(item){
      event.stopPropagation();
      this.$router.push({
        path: "/replace/fileAddPage",
        query: {
          id: item.id
        }
      });
    },
    editPhpto() {
      this.$refs["editAvatar"].show();
    },
    unCarryOut() {
      //this.status = [2, 3, 6, 7];
      this.type = 2;
      this.p = 1;
      this.dataList = [];
      this.finished = false;
      this.listLoading = true;
      this.getData();
    },
    carryOut() {
      //this.status = [4];
      this.type = 3;
      this.p = 1;
      this.dataList = [];
      this.finished = false;
      this.listLoading = true;
      this.getData();
    },
    onLoad() {
      this.listLoading = true;
      if (this.p == 1) {
        this.p++;
      }
      this.getData();
      this.p++;
    },
    getData(args) {
      /*
        1.init
        2.token
        */
      let params = {
        p: this.p,
        type: this.type,
        limit: 10
      };
      if (args) {
        params = {
          ...args,
          ...params
        };
        this.p = 1;
        params.p = this.p;
      }
      params = {
        ...this.params,
        ...params
      };
      // zjj请求方法
      // 订单列表
      get("ordersList", params, res => {
        if (res.code == 200) {
          this.listLoading = false;
          res.data._list.forEach(item => {
            item.invalid_cn = Math.floor(item.invalid_cn / 60);
          });
          this.dataList = this.dataList.concat(res.data._list);
          if (res.data._list.length == 0) {
            this.finished = true;
          }
        } else {
          this.listLoading = false;
          this.finished = true;
        }
      });
    },

    goDetails(item) {
      this.$router.push({
        path: `/replace/details`,
        query: {
          id: item.id
        }
      });
    },
    tabsChange(name) {
      localStorage.setItem("active", Number(this.active)); //将状态缓存到本地缓存中
      switch (name) {
        case 0:
          this.dataList = [];
          this.type = 1;
          this.p = 1;
          this.isMydd = false;
          this.active2 = 0;
          this.finished = false;
          this.listLoading = true;
          this.getData();
          return;
        case 1:
          this.dataList = [];
          this.type = 2;
          this.p = 1;
          this.isMydd = true;
          this.finished = false;
          this.listLoading = true;
          this.getData();
          return;
      }
    }
  },

  created() {
    this.getData();
    let params = {
      p: 1,
      limit: 10
    };
  },
  mounted() {
    let isSmrzOver = sessionStorage.getItem("isSmrzOver");
    if (isSmrzOver == "false") {
      Dialog.confirm({
        title: "提示",
        message:
          "您还没有实名认证，这会影响到您的后续操作，请尽快进行实名认证。",
        confirmButtonText: "立即认证",
        cancelButtonText: "暂不认证"
      })
        .then(() => {
          this.$router.push("/authentication");
          sessionStorage.setItem("isSmrzOver", true);
        })
        .catch(() => {
          Dialog.alert({
            title: "提示",
            message: `您可以随时点击右上角的"齿轮到"<a class="blue" href="/person">个人中心</a>的<a class="blue" href="/authentication">实名认证</a>进行认证。实名认证只能进行一次，认证成功后不可修改认证信息。`
          }).then(() => {
            // on close
          });
          sessionStorage.setItem("isSmrzOver", true);
        });
    }
  },

  computed: {
    photo() {
      return (this.$store.state.user.photo );
    },
    nickname() {
      return this.$store.state.user.nickname;
    },
    smrz() {
      return sessionStorage.getItem('isSmrzOver')
    }
  },
};
</script>

<style lang="less">
.blue {
  color: #425bff !important;
}
.main {
  padding-bottom: 50px;
}
.order-header {
  .setting-icon {
  }
}
.wallet::before {
  font-size: 25px;
  line-height: 65px;
}
.bottomSel {
  position: fixed;
  bottom: 0;
  line-height: 50px;
  text-align: center;
}
.setting-icon {
  position: fixed;
  right: 18px;
  top: 0;
  z-index: 9999;
  width: 25px;
  top: 19px;
}
.order-header {
  width: 100%;
  padding: 0 0.4rem;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  font-weight: 700;
  color: #353535;
  background-color: #fff;
  z-index: 2;

  > span:nth-child(1) {
    display: flex;
    align-items: center;

    > span:nth-child(1) {
      display: inline-block;
      width: 0.933333rem;
      height: 0.933333rem;

      > img {
        width: 100%;
        height: 100%;
      }
    }

    > span:nth-child(2) {
      margin-left: 0.266667rem;
      font-weight: 700;
      font-size: 0.533333rem;
    }
  }

  > span:nth-child(2) {
    display: inline-block;
    width: 21.5px;
    height: 20.5px;

    > img {
      width: 100%;
      height: 100%;
    }
  }
}

.user_msg {
  width: 100%;
  height: 65px;
  background: #425bff;
  line-height: 65px;
  display: flex;
  justify-content: space-between;
  color: #ffffff;

  .user_nameimg {
    display: flex;
    margin-left: 20px;

    .van-image {
      width: 60px !important;
    }

    img {
      display: inline-block;
      border-radius: 50%;
      width: 45px;
      height: 45px;
      vertical-align: middle;
    }

    span {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
    }
  }

  .user_money {
    display: flex;
    margin-right: 15px;
    font-size: 14px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;

    .money_num {
      margin-left: 10px;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
    }
  }
}

.sel_0 {
  &::after {
    left: 0;
  }
}

.sel_1 {
  &::after {
    left: 33.3%;
  }
}

.sel_2 {
  &::after {
    left: 66.6%;
  }
}

.user_task {
  width: 100%;
  display: flex;
  text-align: center;
  height: 40px;
  padding-top: 0.5px;
  background: #f4f4f4;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    width: 33.33%;
    height: 3px;
    background: #1256f0;
    top: 100%;
    transition: 0.3s;
  }

  span {
    flex: 1;
    line-height: 39.5px;
    color: #353535;
    font-size: 14px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
  }

  .weight {
    font-weight: 600;
  }
}

.user_task_list {
  width: 100%;
  height: 4.96875rem;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  float: left;
  font-size: 14px;
  font-family: PingFang-SC-Regular, PingFang-SC;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .task_left {
    height: 46.5px;
    margin-left: 25px;

    .task_num {
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #353535;
      margin-bottom: 10px;
    }

    .task_poj {
      margin-right: 10px;
    }
  }

  .task_right {
    height: 46.5px;
    margin-right: 25px;

    span {
      font-size: 14px;
      font-family: PingFang-SC-Regular, PingFang-SC;
      font-weight: 400;
      color: #ff0000;
    }
  }
}
</style>
<style style="less" scoped>
.font14 {
  font-size: 14px !important;
  margin-left: 5px;
}
</style>
